<!--
 * @Description: 服务配置列表
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-09 17:25:00
 * @LastEditors: 魏勇
 -->
<template>
    <div class="serverParamsConfigs" style="padding: 0 15px;">
        <el-row style="padding: 6px 0">
            <span :key="index" v-for="(btnItem,index) in btns" style="margin-left: 8px;">
                  <el-button v-if="btnItem.type==='iconBtn'" @click="btnClick(btnItem)"
                             :icon="btnItem.icon"></el-button>
                    <el-button v-else @click="btnClick(btnItem)"
                               :icon="btnItem.icon">
                        {{btnItem.label}}
                    </el-button>

            </span>
        </el-row>


        <el-row style="padding-top: 2px;">
            <el-table-ctl :selectBox="true" @rowClick="rowClick" :operationWid="280" :params="queryParams" :operations="operations"  @operationClick="operationClick"
                          :maxHeight="maxHeight" ref="tableObj" :cols="cols"></el-table-ctl>
        </el-row>


        <!--        服务参数配置-->
        <app-dialog
                :isShowDialog="serverConfigWinFlag"
                title="服务参数配置"
                @confirm="confirmConfig"
                :width="winWidth"
                @close="colseWin">
                <add-server-config-form ref="form" :dataItems="dataItems" :curRow="curRow"></add-server-config-form>
        </app-dialog>

<!--配置详情-->
        <app-dialog
                :isShowDialog="detailWinFlag"
                title="配置服务预览"
                @confirm="confirmConfig"
                :isShowConfirmBtn="false"
                :width="winWidth"
                @close="()=>{detailWinFlag=false;}">
            <config-detail  ref="detailForm" :formItems="formItems" :curRow="detailRow"></config-detail>
        </app-dialog>
    </div>
</template>

<script>
import AppDialog from "@/components/AppCommon/AppDialog";
import AppStatus from "@/components/AppCommon/AppStatus";
import { dateFormat, deepCopy } from "@/utils/tool";
import domainCols, {_getEditorType} from './data/domainCols';
import elTableCtl from "../devOpsResource/components/el-table-ctl";
import { Loading } from 'element-ui';
import addServerConfigForm from './components/addServerConfigForm';
import configDetail from './components/configDetail';
let loadingInstance=null;


export default {
    name: "plugin",
    components: {
        AppDialog,
        elTableCtl,
        configDetail,
        addServerConfigForm,
    },
    computed: {
        winWidth(){
            return (parseFloat(930)/parseFloat(document.body.clientWidth))*100+"%"
        }
    },
    data: () => ({
        formItems:[],
        dataItems:[],
        detailRow:null,
        detailWinFlag:false,
        curRow:null,
        serverConfigWinFlag:false,
        cols:domainCols,
        queryParams:{},
        maxHeight: parseFloat(document.body.clientHeight) - 148,
        operations:[
            {label:"配置详情", id: 'configDetail'}
        ],
        btns:[
            {id:'serverConfig',label:'服务参数配置',icon:'el-icon-plus'}
        ]
    }),
    created() {

    },
    mounted() {
        this.$nextTick(()=>{
            this.getPluginList();
        })
    },
    watch: {

    },
    methods: {
        rowClick({row}){
            this.curRow=row;
        },
        //确定配置信息
        confirmConfig(){
            let data=this.$refs.form.getSubmitData();
            this.api.serverConfigAdd(data)
                .then(res => {
                    this.serverConfigWinFlag = false;
                    this.$refs.tableObj.reloadData();
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //显示服务参数配置窗口
        serverConfig(){
            let curSelId=this.$refs.tableObj.getRowId();
            if(curSelId==null||curSelId===""){
                this.$alert("请选择相应记录后再操作！");
                return void(0);
            }
            if(curSelId.split(";").length>1){
                this.$alert("一次只能操作一条记录！");
                return void(0);
            }
            //如果选中的记录不是当前记录
            if(this.curRow==null||this.curRow["id"]!==curSelId){
                this.curRow=this.$refs.tableObj.getCurRowById(curSelId);
            }
            loadingInstance = Loading.service({text:"加载中"});
            this.dataItems=[];
            this.api.getConfig({dependId:curSelId,method: 'GET'})
                .then(res => {
                    loadingInstance.close();
                    res["data"].forEach((itemObj,index)=>{
                        itemObj["dependId"]=curSelId;
                        this.dataItems.push({...itemObj});
                    });
                    this.$nextTick(()=>{
                        this.serverConfigWinFlag=true;
                    })
                })
                .catch(err => {
                    console.warn(err.msg)
                });

        },
        //关闭窗口
        colseWin(){
            this.$refs.form.clearData();
            this.serverConfigWinFlag=false;
        },
        //按钮点击事件
        btnClick({id}){
            this[id]&&this[id]();
        },
        //配置详情显示
        configDetail(row){
            this.detailRow=row;
            this.detailWinFlag=true;
            this.formItems=[];
            loadingInstance = Loading.service({text:"加载中"});
            this.api.getConfig({dependId:row["id"],method: 'GET'})
                .then(res => {
                    loadingInstance.close();
                    this.detailWinFlag=true;
                    res["data"].forEach((itemObj,index)=>{
                        let {name,code,type}=itemObj;
                        this.formItems.push({id:code,label:name,value:'',required:false,sortable:true,disabled:true,editorType:_getEditorType(type),show:true});
                    });
                })
                .catch(err => {
                    loadingInstance.close();
                    console.warn(err.msg)
                });
        },
        operationClick({row, id}){
            this[id]&&this[id](row);
        },
        // 获取产品列表
        getPluginList() {
            loadingInstance = Loading.service({text:"加载中"});
            this.$refs.tableObj.flushGridByUrl("getPluginList",{
                method: "get", customRequest: true, dataFun: (list) => {
                    loadingInstance.close();
                    //对数据进行转换
                    let recordJsonAry = [];let rowObj={};
                    list.forEach((itemObj, index) => {
                        let {levelName1,levelName2,productLineName}=itemObj;
                        let {id,serviceName}=itemObj["productBasicInfo"];
                        rowObj={levelName1,levelName2,productLineName,id,serviceName};
                        recordJsonAry.push(rowObj);
                    });
                    return recordJsonAry;
                }
            });
        },
    }
};
</script>

